<template>
  <div id="app" v-if="data">
    <section
      class="m-card"
      style="border-radius: 0px; padding: 0px; margin-bottom: 8px"
    >
      <div class="listen-top">
        <h1 class="title">{{ data[0].book_name }}</h1>
        <div class="book-cover">
          <div class="book-cover-inner">
            <img width="120" height="160" :src="data[0].detail_img1" alt="" />
          </div>
        </div>
        <p class="book-brief">{{ data[0].title }}</p>
        <van-divider />
        <div class="book-author">
          <span>作者：{{ data[0].author }}</span>
          <span>购买人数:{{ data[0].buy }}</span>
        </div>
      </div>
    </section>
    <section
      class="m-card"
      style="border-radius: 0px; padding: 20px 16px 8px; margin-bottom: 8px"
    >
      <h2 class="duzhe-detail">详情</h2>
      <div class="duzhe-contents">
        <div>
          <p style="text-align: center">
            <span style="color: #e67e23">
              <strong style="font-weight: bold">{{ data[0].book_name }}</strong>
            </span>
          </p>
          <p>
            <span style="color: #e67e23">
              <strong style="font-weight: bold">本书价值：</strong>
            </span>
          </p>
          <p>“{{ data[0].description }}”</p>
          <p>
            <span style="color: #e67e23">
              <strong style="font-weight: bold">相关介绍</strong>
            </span>
          </p>
          <p>书名：{{ data[0].book_name }}</p>
          <p>作者：{{ data[0].author }}</p>
          <p>出版社：{{ data[0].publisher }}</p>
          <p>出版时间：{{ data[0].pub_data }}</p>
        </div>
      </div>
    </section>
    <section
      class="m-card"
      style="border-radius: 0px; padding: 20px 16px 8px; margin-bottom: 50px"
    >
      <h2 class="duzhe-detail" style="margin-bottom: 8px">相关推荐</h2>
      <div v-if="books">
        <book-list
          v-for="(item, index) in books.data"
          :key="index"
          :books="item"
        />
      </div>
    </section>
    <section class="m-card bottom-area" style="border-radius: 0px">
      <van-button
        v-if="!islogin"
        @click="toLogin"
        style="width: 160px"
        type="default"
        round
        color="#f07d33"
        >立即购买|￥3.99</van-button
      >
      <van-button
        v-else
        @click="toBuy"
        style="width: 160px"
        type="default"
        round
        color="#f07d33"
        >立即购买|￥3.99</van-button
      >
      <van-button
        class="btn"
        style="width: 160px"
        round
        color="linear-gradient(
57deg,#e7d6b8,#ddc297)"
        >会员免费|开通会员</van-button
      >
    </section>
    <back-home />
  </div>
</template>

<script>
import { Dialog } from 'vant'
import BackHome from '../components/BackHome.vue'
import BookList from '../components/BookList.vue'
import { mapState, mapMutations } from 'vuex'
export default {
  props: ['lid'],
  data() {
    return {
      data: '',
      books: '',
    }
  },
  watch: {
    $route(to, from) {
      this.loading = true
      this.$router.go(0)
      window.scrollTo(0, 0)
    },
  },

  mounted() {
    this.getData()
  },
  updated() {},
  methods: {
    ...mapMutations(['updateBooktpid', 'updateUser']),
    getData() {
      let url = 'detail/' + this.lid
      // console.log(url)
      this.axios.get(url).then(res => {
        console.log(res)
        this.data = res.data.data
        this.$store.commit('updateBooktpid', res.data.data[0].booktp_id)
        let url2 = '/booktp/' + this.$store.state.booktpid
        console.log('url:', url2)
        this.axios.get(url2).then(res => {
          console.log('推荐:', res)
          // console.log(res.data);
          this.books = res.data
          console.log(this.books)
        })
      })
    },
    toLogin() {
      Dialog.confirm({
        title: '提示',
        message: '请您先登录后再进行相关操作',
      })
        .then(() => {
          this.$router.push('/login')
        })
        .catch(() => {})
    },

    toBuy() {
      var moment = require('moment')
      let time = moment().format('YYYY-MM-DD')
      let url = 'buy'
      let id = sessionStorage.getItem('id')
      // console.log(url, id, this.lid, time)
      let params = `id=${id}&bid=${this.lid}&time=${time}`
      Dialog.confirm({
        title: '确实购买吗',
        message: '点击确认进行购买',
      })
        .then(() => {
          this.axios.post(url, params).then(res => {
            console.log(res)
            this.$toast.success('购买成功')
          })
        })
        .catch(() => {
          this.$toast.fail('取消购买')
        })
    },

    getBooks() {},
  },
  components: { BookList, BackHome },
  computed: {
    ...mapState(['booktpid', 'user', 'islogin']),
  },
}
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.btn {
  color: #8b572a !important;
}
#app {
  max-width: 640px;
  margin: 0 auto;
  color: #333;
  background-color: #f7f7f7;
  word-break: break-all;
  font-family: PingFangSC-Regular, Helvetica, STXihei, Verdana, Calibri, Arial,
    sans-serif;
}
section {
  display: block;
}
h1 {
  display: block;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: 500;
}
p {
  display: block;
  margin-block-start: 1em;
}

.m-card {
  background-color: #fff;
  box-sizing: border-box;
}
.listen-top {
  margin: 0 16px;
}
.title {
  padding: 16px 0 24px;
  font-size: 25px;
  text-align: center;
  line-height: 40px;
  font-weight: bold;
}
.book-cover {
  margin-bottom: 20px;
  height: 160px;
  text-align: center;
}
.book-cover-inner {
  position: relative;
  display: inline-block;
  height: 100%;
  box-shadow: 0 8px 16px 0 rgb(0 0 0 / 10%);
  border-radius: 5px;
  overflow: hidden;
}
.book-brief {
  margin-bottom: 20px;
  font-size: 16px;
  color: #666;
  line-height: 26px;
}
.book-author {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: #999;
  line-height: 44px;
}
.duzhe-detail {
  margin-bottom: 4px;
  font-size: 22px;
  line-height: 34px;
  color: #333;
  font-weight: bold;
}
.duzhe-contents {
  position: relative;
  font-size: 16px;
  color: #333;
  line-height: 26px;
  text-align: justify;
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
}
.bottom-area {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 5px 20px;
  z-index: 99;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
}
</style>
